<template>
	<view>
		<view class="top">
			<view class="back_btn">
				<u-icon name="arrow-left" color="#2e2e2e" size="32" hover-class="none" @click="back"></u-icon>
			</view>
			<u-search :show-action="true" action-text="搜索" v-model="goodsTitle" placeholder="搜索商品" @search="searchGoods"></u-search>
		</view>
		<view class="no_search" v-if="noSearch">
			<view class="headline">
				<text class="title_box">热门搜索</text>
				<view class="">
					<text v-for="(item, index) in hot" :key="index" class="hot" @click="searchHot(item)">{{item}}</text>
				</view>
			</view>
		</view>
		<view class="goodsList" v-else>
			<view class="empty_box" v-if="projectList.length == 0">
				<u-empty mode="search" ></u-empty>
			</view>
			<view class="project_list">
				<view v-for="(item, index) in projectList" :key="index">
					<view class="project_item" :id="item.id" @click="projectDetail(item.id)">
						<image :src="item.imgUrl" mode="" class="project_img"></image>
						<view class="project_info">
							<view class="project_title">
								<text>{{ item.title }}</text>
								<text class="price">￥{{ item.price }}/份</text>
							</view>
							<view class="director">导演：{{ item.director }}</view>
							<view class="introduce">{{ item.introduce }}</view>
							<view class="sale_box">
								<u-line-progress
									:active-color="item.sale >= 100 ? '#D5D6DC' : '#EC5F58'"
									:percent="item.sale"
									width="247"
									inactive-color="#FFEBEA"
									:show-percent="false"
									height="34"
								></u-line-progress>
								<view class="sale_number" :style="'color:' + (item.sale >= 100 ? '#D5D6DC' : '#F1736D')">
									{{ item.sale >= 100 ? '已售罄' : '已售' + item.sale + '%' }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				noSearch: false,
				hot: ['我和我的祖国', '中国机长', '囧妈'],
				goodsTitle: '',
				projectList: [
					{
						id: 0,
						imgUrl: '../../static/indexImage/11.png',
						title: '我和我的祖国',
						sale: 60,
						price: 5000,
						director: '陈凯歌',
						introduce: '该片讲述了新中国成立70年间普通百姓与共和国息息相关的故事，于2019年9月30日在中国大陆上映。'
					},
					{
						id: 1,
						imgUrl: '../../static/indexImage/12.png',
						title: '囧妈',
						sale: 100,
						price: 5000,
						director: '徐峥',
						introduce: '该片讲述一趟六天六夜的莫斯科之旅，让徐伊万和卢小花母子回到了'
					},
					{
						id: 2,
						imgUrl: '../../static/indexImage/10.png',
						title: '中国机长',
						sale: 30,
						price: 5000,
						director: '刘伟强',
						introduce: '该片根据2018年5月14日四川航空3U8633航班机组成功处置特情真'
					}
				],
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			searchHot(item) {
				this.goodsTitle = item
			},
			searchGoods() {
				console.log(this.goodsTitle)
			},
			projectDetail(id) {
				uni.navigateTo({
					url: '../projectDetail/projectDetail?id=' + id
				})
			}
		},
		onLoad(options) {
			console.log(options)
		}
	}
</script>

<style lang="scss" scoped>
.top {
	display: flex;
	align-items: center;
	.back_btn {
		margin-right: 32upx;
	}
}

.no_search {
	padding-top: 48upx;
	.headline {
		.title_box {
			font-size: 32upx;
			position: relative;
			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 12upx;
				background: $red;
				border-radius: 17upx;
				opacity: 0.8;
				position: absolute;
				bottom: -2upx;
			}
		}
		view {
			margin-top: 30upx;
			text {
				margin-right: 40upx;
				font-size: 28upx;
				color: $color-666;
			}
		}
	}
}

.goodsList {
	padding: 25upx 0;
}

.project_item {
	display: flex;
	margin-bottom: 30upx;
	.project_img {
		width: 230upx;
		height: 300upx;
		border-radius: 15upx;
		margin-right: 20upx;
	}

	.project_info {
		width: 100%;
		flex: 1;
		.project_title {
			font-size: 32upx;
			margin-bottom: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price {
				color: $red;
				font-weight: bold;
				font-size: 34upx;
			}
		}
		.director,
		.introduce {
			font-size: 30upx;
			color: $color-666;
			margin-bottom: 30upx;
		}
		.introduce {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; /*这里填入需要几行省略*/
			overflow: hidden;
			line-height: 40upx;
		}
		.sale_box {
			display: flex;
			align-items: center;
			width: 100%;
			.sale_number {
				flex: 1;
				margin-left: 20upx;
				white-space: nowrap;
				font-size: 26upx;
			}
		}
		.recommend_box {
			display: flex;
			align-items: center;
			text {
				font-size: 26upx;
			}
		}
	}
}

.empty_box {
	width: 100%;
	height: 80vh;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>

<style>
page {
	padding: 0 30upx;
	padding-top: 70upx;
}
</style>
